{
    strStatus = new Ext.data.SimpleStore({
                fields : ['value', 'id'],
                data   : [['No', '0'], ['Yes', '1']]
            });

    cboStatus = new Ext.form.ComboBox({
                name          : 'status',
                fieldLabel    : '<?=$this->translate->_("Status")?>',
                width         : 170,
                height        : 24,
                bodyStyle     : 'padding:15px',
                store         : strStatus,
                valueField    : 'id',
                displayField  : 'value',
                hiddenName    : 'item_status',
                typeAhead     : true,
                mode          : 'local',
                triggerAction : 'all',
                emptyText     : '- <?=$this->translate->_("Select value...")?> -',
                selectOnFocus : true,
                editable      : false,
                allowBlank    : false
            });

    MyDesktop.RenderItemStatus = function(value) {
        var arr = Array('Disable', 'Enable');
        return arr[value];
    }

    MyDesktop.storeCategory = new Ext.data.Store({
                id       : 'storeCategory',
                proxy    : new Ext.data.HttpProxy({
                            url    : '<?=BASE_URL?>/category/list-all',
                            method : 'POST'
                        }),
                reader   : new Ext.data.JsonReader({
                            root          : 'results',
                            totalProperty : 'total'
                        }, [{
                                name : 'category_id'
                            }, {
                                name : 'admin_title'
                            }]),
                autoLoad : true
            });

    MyDesktop.cboCategory = new Ext.form.ComboBox({
                name          : 'category_id',
                fieldLabel    : 'Category',
                width         : 170,
                height        : 24,
                bodyStyle     : 'padding:15px',
                store         : MyDesktop.storeCategory,
                // id : 'category_id',
                valueField    : 'category_id',
                displayField  : 'admin_title',
                hiddenName    : 'category_id',
                typeAhead     : true,
                mode          : 'local',
                triggerAction : 'all',
                emptyText     : '- Choose -',
                selectOnFocus : true,
                editable      : false
            });

    MyDesktop.split = function(str) {
        if (str) {
            var result = str.toString();

            result = result.substring(0, 30)
            if (str.length > 30) {
                result = result + '...';
            }
            return result.replace('<', '&lt;');
        }
        return str;
    }

    MyDesktop.ItemManagement = Ext.extend(Ext.app.Module, {
        createWindow : function() {
            var desktop = app.getDesktop();
            var win = desktop.getWindow('listItem');
            if (!win) {
                win = desktop.createWindow({
                    id          : 'listItem',
                    title       : "<?=$this->translate->_('Item Management')?>",
                    width       : <?=$this->winWidth?>,
                    height      : <?=$this->winHeight?>,
                    iconCls     : 'icon-grid',
                    layout      : 'border',
                    maximizable : false,

                    tbar        : [/*{
                            id      : 'delete',
                            text    : "<?=$this->translate->_('Delete')?>",
                            icon    : '<?=ICONS_PATH?>/delete16x16.png',
                            cls     : "x-btn-text-icon",
                            handler : function() { // submit code here
                            }
                        }, {
                            id      : 'newItem',
                            text    : "<?=$this->translate->_('New Item')?>",
                            icon    : '<?=ICONS_PATH?>/newuser16x16.png',
                            cls     : "x-btn-text-icon",
                            handler : function() {
                            }
                        },*/ {
                            id      : 'refresh',
                            text    : "<?=$this->translate->_('Refresh')?>",
                            icon    : '<?=ICONS_PATH?>/refresh16x16.png',
                            cls     : "x-btn-text-icon",
                            handler : function() {
                               MyDesktop.ItemManagement.dataStore.reload();
                            }
                        }],

                    items       : [MyDesktop.ItemManagement.listGrid,
                        MyDesktop.ItemManagement.formAdd],

                    listeners   : {
                        close : function() {
                        }
                    }

                });
            }
            <?php
            if ($this->maximizeWin) {
            echo "win.maximize();";
            }
            ?>
            win.show();

        }
    });

    /**
     * Define Store
     */
    MyDesktop.ItemManagement.dataStore = new Ext.data.Store({
        proxy    : new Ext.data.HttpProxy({
                    url    : '<?=BASE_URL?>/<?=$this->currentController?>/list',
                    method : 'POST'
                }),
        reader   : new Ext.data.JsonReader({
                    root          : 'results',
                    totalProperty : 'total',
                    id            : '<?=$this->pk?>'
                }, [{
                        name    : 'item_id',
                        mapping : 'item_id'
                    }, {
                        name    : 'item_title',
                        mapping : 'item_title'
                    }, {
                        name    : 'category_id',
                        mapping : 'category_id'
                    }, {
                        name    : 'item_image',
                        mapping : 'item_image'
                    }, {
                        name    : 'item_short_description',
                        mapping : 'item_short_description'
                    }, {
                        name    : 'item_description',
                        mapping : 'item_description'
                    }, {
                        name    : 'item_order',
                        mapping : 'item_order'
                    }, {
                        name    : 'item_status',
                        mapping : 'item_status'
                    }]),
        sortInfo : {
            field     : '<?=$this->pk?>',
            direction : "DESC"
        }
    });

    /**
     * Define Column Model
     */
    MyDesktop.ItemManagement.columnModel = new Ext.grid.ColumnModel({
                defaults : {
                    sortable : true
                },
                columns  : [new Ext.grid.RowNumberer(), {
                        header    : 'item_id',
                        dataIndex : 'item_id',
                        hidden    : true
                    }, {
                        header    : 'item_title',
                        dataIndex : 'item_title'
                    }, {
                        header    : 'category_id',
                        dataIndex : 'category_id',
                        hidden    : true
                    }, {
                        header    : 'item_short_description',
                        dataIndex : 'item_short_description',
                        renderer  : MyDesktop.split
                    }, {
                        header    : 'item_description',
                        dataIndex : 'item_description',
                        renderer  : MyDesktop.split,
                        hidden    : true
                    }, {
                        header    : 'item_order',
                        dataIndex : 'item_order'
                    }, {
                        header    : 'item_status',
                        dataIndex : 'item_status',
                        renderer  : MyDesktop.RenderItemStatus
                    }, {
                        header    : 'item_image',
                        dataIndex : 'item_image'
                    }]
            });

    /**
     * Define Grid
     */
    MyDesktop.ItemManagement.listGrid = new Ext.grid.EditorGridPanel({
                id           : 'Itemgrid',
                title       : "<?=$this->translate->_('List')?>",
                store        : MyDesktop.ItemManagement.dataStore,
                cm           : MyDesktop.ItemManagement.columnModel,
                clicksToEdit : 1,
                region       : 'center',
                width        : 550,
                split        : true,
                selModel     : new Ext.grid.RowSelectionModel({
                            singleSelect : true
,                            listeners: {
                               rowselect: function(sm, row, rec) {
                                    MyDesktop.ItemManagement.formAdd.expand(true);
                                    MyDesktop.ItemManagement.formAdd.getForm()
                                            .loadRecord(rec);
                                }
                            }                        }),
                listeners    : {
                    render    : function() {
                        MyDesktop.ItemManagement.dataStore.load();
                    }

                }
            });

    MyDesktop.ItemManagement.formAdd = new Ext.FormPanel({
        id          : 'ItemFormPanel',
        url         : '<?=BASE_URL?>/<?=$this->currentController?>/save',
        region      : "east",
        width       : 730,
        collapsible : true,
        split       : true,
        defaultType : 'textfield',
        autoScroll  : true,
        fileUpload  : true,
        frame       : true,
        items       : [
{
                fieldLabel : 'item_id',
                name       : 'item_id',
                id         : 'item_id',
                style      : 'width:98%'
,
                readOnly   : true
            }, {
                fieldLabel : "<?=$this->translate->_('item_title')?>",
                name       : 'item_title',
                id         : 'item_title',
                style      : 'width:98%'
            }, MyDesktop.cboCategory, {
                xtype : "fieldset",
                title : "<?=$this->translate->_('item_image')?>",
                autoHeight : true,
                layout: 'form',
                
                items : [{
                    xtype      : 'fileuploadfield',
                    id         : 'item_image',
                    emptyText  : 'Select an image',
                    fieldLabel : "<?=$this->translate->_('Choose Image')?>",
                    name       : 'item_image',
                    anchor     : '95%',
                    //allowBlank : false,
                    msgTarget  : 'side',
                    buttonText : '...',
                    layout: 'form',
                    buttonCfg  : {
                        iconCls : 'upload-icon'
                    }
                }, {
                    xtype : "checkbox",
                    fieldLabel : "<?=$this->translate->_('Delete Image')?>",
                    name : "item_image_delete",
                    inputValue : 1
                    //,checked : true
                }]
            } , {
                fieldLabel : "<?=$this->translate->_('item_short_description')?>",
                name       : 'item_short_description',
                id         : 'item_short_description',
                style      : 'width:98%',
                xtype      : 'htmleditor'
            }, {
                fieldLabel : "<?=$this->translate->_('item_description')?>",
                name       : 'item_description',
                id         : 'item_description',
                style      : 'width:98%',
                xtype      : 'htmleditor'
            }, {
                fieldLabel : "<?=$this->translate->_('item_order')?>",
                name       : 'item_order',
                id         : 'item_order',
                style      : 'width:98%'
            }, cboStatus],
        tbar        : [{
            id      : "submitFormEditItem",
            text    : '<?=$this->translate->_("Save")?>',
            icon    : '<?=ICONS_PATH?>/save.gif',
            tooltip : '<?=$this->translate->_("Save to database")?>',
            handler : function() { // submit code here
                var form = MyDesktop.ItemManagement.formAdd.form;
                form.submit({
                    waitMsg : '<?=$this->translate->_("Please wait")?>',
                    reset   : false,
                    success : function(f, a) {
                        // form.toBack();
                        form.reset();
                        
                        var message = "<?=$this->translate->_('Can\'t save to DB!')?>";
                        try {
                            message = a.result.message;
                        } catch (ex) {
                        }
                        MyDesktop.ItemManagement.dataStore.reload();
                        Ext.Msg.alert('<?=$this->translate->_("Status")?>',
                                message);
                    },
                    failure : function(f, a) {
                        // form.toBack();
                        var message = "<?=$this->translate->_('Your form is not valid!')?>";
                        try {
                            message = a.result.message;
                        } catch (ex) {
                        }
                        Ext.Msg.alert('<?=$this->translate->_("Status")?>',
                                message);
                    }
                });
            }
        }, {
            text    : '<?=$this->translate->_("Form Add")?>',
            icon    : '<?=ICONS_PATH?>/refresh16x16.png',
            cls     : "x-btn-text-icon",
            handler : function() {
                var form = MyDesktop.ItemManagement.formAdd;

                form.getForm().reset();
            }

        }, {
            id      : 'Delete',
            text    : "<?=$this->translate->_('Delete')?>",
            icon    : '<?=ICONS_PATH?>/delete16x16.png',
            cls     : "x-btn-text-icon",
            handler : function() { // submit code here
                var form = MyDesktop.ItemManagement.formAdd;

                var id = form.findById('<?=$this->pk?>').getValue();

                Ext.Ajax.request({
                    url     : '<?=BASE_URL?>/<?=$this->currentController?>/delete/id/'
                            + id,
                    success : function(r) {
                        MyDesktop.ItemManagement.dataStore.reload();
                        Ext.Msg
                                .alert('<?=$this->translate->_("Status")?>',
                                        '<?=$this->translate->_("Delete successfull!")?>');
                        form.getForm().reset();
                    },
                    failure : function(r) {
                        Ext.Msg.alert('<?=$this->translate->_("Status")?>',
                                '<?=$this->translate->_("Request Fail! Please check your connection")?>');
                    }
                });
            }
        }]
    });

    var ItemManagement = new MyDesktop.ItemManagement();
    ItemManagement.createWindow();

}